<template>
  <view>
    <!-- 搜索框组件 -->
    <Search-Bar></Search-Bar>

    <!-- 轮播图 -->
    <swiper class="index_swiper" circular indicator-dots>
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator>
          <image :src="item.image_src" mode="widthFix" />
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 导航 -->
    <view class="nav">
      <navigator v-for="(item,index) in navList" :key="index">
        <image :src="item.image_src" mode="widthFix" />
      </navigator>
    </view>

    <!-- 楼层 -->
    <view class="floor" v-for="(item,index) in floorList" :key="index">
      <!-- 标题 -->
      <view>
        <image :src="item.floor_title.image_src" mode="widthFix" />
      </view>
      <!-- 内容 -->
      <view class="flooriImgs">
        <navigator v-for="(item2,index2) in item.product_list" :key="index2">
          <image :src="item2.image_src" :mode="index2===0?'widthFix':'scaleToFill'" />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import SearchBar from "@/components/SearchBar";
export default {
  components: {
    SearchBar,
  },

  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },

  async onLoad() {
    // 进入提示
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    // Promise.all([]) 数组中函数最后一个加载完后执行命令
    Promise.all([this.swiperLoad(), this.navLoad(), this.floorLoad]).then(
      () => {
        uni.hideLoading();
      }
    );
    this.swiperLoad();
    this.navLoad();
    this.floorLoad();
  },

  methods: {
    //
    swiperLoad() {
      uni
        .request({
          url:
            "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        })
        .then((res) => {
          // console.log(res[1].data.message);
          this.swiperList = res[1].data.message;
        });
    },

    navLoad() {
      uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
        })
        .then((res) => {
          this.navList = res[1].data.message;
        });
    },

    floorLoad() {
      uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
        })
        .then((res) => {
          console.log(res[1].data.message);
          this.floorList = res[1].data.message;
        });
    },
  },
};
</script>

//  navigator view这种标签需要加lang="scss"
<style lang="scss">
.index_swiper {
  /* 图片是750*340 ,rpx默认是750,图片尺寸刚好rpx是1/1*/
  height: 340rpx;
}

.nav {
  display: flex;
  navigator {
    flex: 1;
    padding: 30rpx;
  }
}

.flooriImgs {
  navigator {
    float: left;
    width: 33%;
    overflow: hidden;
    border: 2rpx solid #fff;
  }
  navigator:nth-last-child(-n + 4) {
    // 后四个
    // mode=scaleToFill 不管图片的宽高比例 直接将图片内容拉伸到相框大小,设置相框高度为第一张图片的一半
    /* 第一张图片的高 208px => 416rpx =>  一半 */
    height: 208rpx;
    image {
      // height: 208rpx;
      height: 100%;
    }
  }
}
</style>